MudBlazor - Blazor Component Library

Basic Text Fields

Standard

Filled

Outlined

<MudTextField @bind-Value="TextValue" Label="Standard" Variant="Variant.Text"></MudTextField>
<MudTextField @bind-Value="TextValue" Label="Filled" Variant="Variant.Filled"></MudTextField>
<MudTextField @bind-Value="TextValue" Label="Outlined" Variant="Variant.Outlined"></MudTextField>

@code {
    public string TextValue { get; set; }
}

Form Props

Counter

If you set the Counter prop to any int, the counter will be display at the bottom of the textfield.
Using a specific number will show the desired max while setting it to 0 will only show the current count.
Add MaxLength to force a max count directly on the input and use Validation to validate the data.

Regular

This field uses Counter prop

0 / 25

Limited

This field uses Counter and MaxLength prop

0 / 25

Counter

This field has Counter set to 0

0

Max Length

This field uses MaxLength prop

<MudTextField T="string" Counter="25" HelperText="This field uses Counter prop" Immediate="true" Validation="@(new Func<string, IEnumerable<string>>(MaxCharacters))" Label="Regular" Variant="Variant.Text" />
<MudTextField T="string" Counter="25" MaxLength="25" HelperText="This field uses Counter and MaxLength prop" Immediate="true" Validation="@(new Func<string, IEnumerable<string>>(MaxCharacters))" Label="Limited" Variant="Variant.Text" />
<MudTextField T="string" Counter="0" HelperText="This field has Counter set to 0" Immediate="true" Label="Counter" Variant="Variant.Text" />
<MudTextField T="string" MaxLength="10" HelperText="This field uses MaxLength prop" Immediate="true" Label="Max Length" Variant="Variant.Text" />

@code {
    private IEnumerable<string> MaxCharacters(string ch)
    {
        if (!string.IsNullOrEmpty(ch) && 25 < ch?.Length)
            yield return "Max 25 characters";
    }
}

Adornments

This can be used to add a prefix or a suffix. Text, Icon or Icon Button. For WCAG standards for buttons, an AdornmentAriaLabel can be added to use as the aria-label.

Amount

Kg

Weight

Password

Amount

Kg

Weight

Password

Amount

Kg

Weight

Password

<div class="d-flex">
    <MudTextField @bind-Value="Amount" Label="Amount" Variant="Variant.Text" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.AttachMoney" />
    <MudTextField @bind-Value="Weight" HelperText="Weight" Variant="Variant.Text" Adornment="Adornment.End" AdornmentText="Kg" Class="mx-8" />
    <MudTextField @bind-Value="Password" Label="Password" Variant="Variant.Text" InputType="@PasswordInput" Adornment="Adornment.End" AdornmentIcon="@PasswordInputIcon" OnAdornmentClick="ButtonTestclick" AdornmentAriaLabel="Show Password" />
</div>
<div class="d-flex">
    <MudTextField @bind-Value="Amount" Label="Amount" Variant="Variant.Filled" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.AttachMoney" />
    <MudTextField @bind-Value="Weight" HelperText="Weight" Variant="Variant.Filled" Adornment="Adornment.End" AdornmentText="Kg" Class="mx-8" />
    <MudTextField  @bind-Value="Password" Label="Password"  Variant="Variant.Filled" InputType="@PasswordInput" Adornment="Adornment.End" AdornmentIcon="@PasswordInputIcon" OnAdornmentClick="ButtonTestclick" AdornmentAriaLabel="Show Password" />
</div>
<div class="d-flex">
    <MudTextField @bind-Value="Amount" Label="Amount" Variant="Variant.Outlined" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.AttachMoney" />
    <MudTextField @bind-Value="Weight" HelperText="Weight" Variant="Variant.Outlined" Adornment="Adornment.End" AdornmentText="Kg" Class="mx-8" />
    <MudTextField  @bind-Value="Password" Label="Password" Variant="Variant.Outlined" InputType="@PasswordInput" Adornment="Adornment.End" AdornmentIcon="@PasswordInputIcon" OnAdornmentClick="ButtonTestclick" AdornmentAriaLabel="Show Password" />
</div>

@code {
    public double? Amount { get; set; }
    public int? Weight { get; set; }
    public string Password { get; set;} = "superstrong123";

    bool isShow;
    InputType PasswordInput = InputType.Password;
    string PasswordInputIcon = Icons.Material.Filled.VisibilityOff;

    void ButtonTestclick()
    {
        @if (isShow)
        {
            isShow = false;
            PasswordInputIcon = Icons.Material.Filled.VisibilityOff;
            PasswordInput = InputType.Password;
        }
        else {
            isShow = true;
            PasswordInputIcon = Icons.Material.Filled.Visibility;
            PasswordInput = InputType.Text;
        }
    }
}

Clear Button

Clearable Standard

Clearable Filled

Clearable Outlined

<MudTextField @bind-Value="_string" Label="Clearable Standard" Variant="Variant.Text" Clearable="true" Adornment="Adornment.End" AdornmentIcon="@Icons.Custom.Brands.MudBlazor" AdornmentColor="Color.Primary" Immediate="true" />
<MudTextField @bind-Value="_string" Label="Clearable Filled" Variant="Variant.Filled" Clearable="true" Immediate="true" />
<MudTextField @bind-Value="_string" Label="Clearable Outlined" Variant="Variant.Outlined" Clearable="true" />

@code {
    string _string;
}

Binding

Multiline

Filled

Outlined

<MudTextField T="string" Label="Multiline" Variant="Variant.Text" Text="@sampleText" Lines="5" />
<MudTextField T="string" Label="Filled" Variant="Variant.Filled" Text="@sampleText" Lines="3" />
<MudTextField T="string" Label="Outlined" Variant="Variant.Outlined" Text="@sampleText" Lines="3" />

@code
{
    string sampleText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
}

If you use Blazor Server for your app, note that there is a default limit on the maximum message size SignalR can handle. If you want to support large texts in the input element (around 15k characters and more) you need to increase the message size limit by setting MaximumReceiveMessageSize accordingly in the HubOptions in your Program.cs file. For more details see this issue on github.

Input Types

You can change the InputType of MudTextField to use the native browser implementation of the HTML input element. Note that any Placeholder will be ignored where the browser provides a default placeholder.

All inputs can be bound to string types; alternatively, input types Date and DateTimeLocal can be bound to a nullable DateTime?. When binding to a DateTime? you must set the Format property to yyyy-MM-dd for input type Date, and you must set the Format property to s (ISO 8601) for input type DateTimeLocal.

Color

Date

DateTimeLocal

Month

Time

Week

<MudTextField T="string" Label="Color"  InputType="InputType.Color" />
<MudTextField T="DateTime?" Format="yyyy-MM-dd" Label="Date"  InputType="InputType.Date"/>
<MudTextField T="DateTime?" Format="s" Label="DateTimeLocal" InputType="InputType.DateTimeLocal"/>
<MudTextField T="string" Label="Month" InputType="InputType.Month"/>
<MudTextField T="string" Label="Time" InputType="InputType.Time"/>
<MudTextField T="string" Label="Week" InputType="InputType.Week"/>